<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.1.1">
  <link rel="apple-touch-icon" sizes="180x180" href="/hexo/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/hexo/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/hexo/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/hexo/images/logo.svg" color="#222">

<link rel="stylesheet" href="/hexo/css/main.css">


<link rel="stylesheet" href="/hexo/lib/font-awesome/css/all.min.css">

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"youchen12138.gitee.io","root":"/hexo/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":false,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}}};
  </script>

  <meta property="og:type" content="website">
<meta property="og:title" content="幽辰的博客">
<meta property="og:url" content="https://youchen12138.gitee.io/hexo/page/8/index.html">
<meta property="og:site_name" content="幽辰的博客">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="幽辰">
<meta name="twitter:card" content="summary">

<link rel="canonical" href="https://youchen12138.gitee.io/hexo/page/8/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : true,
    isPost : false,
    lang   : 'en'
  };
</script>

  <title>幽辰的博客</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="Toggle navigation bar">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/hexo/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">幽辰的博客</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="main-menu menu">
        <li class="menu-item menu-item-home">

    <a href="/hexo/" rel="section"><i class="fa fa-home fa-fw"></i>Home</a>

  </li>
        <li class="menu-item menu-item-tags">

    <a href="/hexo/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>Tags<span class="badge">23</span></a>

  </li>
        <li class="menu-item menu-item-categories">

    <a href="/hexo/categories/" rel="section"><i class="fa fa-th fa-fw"></i>Categories<span class="badge">14</span></a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/hexo/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>Archives<span class="badge">127</span></a>

  </li>
  </ul>
</nav>




</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content index posts-expand">
            
      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
    <link itemprop="mainEntityOfPage" href="https://youchen12138.gitee.io/hexo/2020/08/26/Flutter-%E5%BA%95%E9%83%A8%E5%AF%BC%E8%88%AA%E6%A0%8F/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/hexo/images/avatar.jpg">
      <meta itemprop="name" content="幽辰">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="幽辰的博客">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/hexo/2020/08/26/Flutter-%E5%BA%95%E9%83%A8%E5%AF%BC%E8%88%AA%E6%A0%8F/" class="post-title-link" itemprop="url">Flutter-底部导航栏</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">Posted on</span>
              

              <time title="Created: 2020-08-26 16:29:05 / Modified: 16:40:17" itemprop="dateCreated datePublished" datetime="2020-08-26T16:29:05+08:00">2020-08-26</time>
            </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">In</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/hexo/categories/Flutter/" itemprop="url" rel="index"><span itemprop="name">Flutter</span></a>
                </span>
            </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <h2 id="BottomNavigationBar"><a href="#BottomNavigationBar" class="headerlink" title="BottomNavigationBar"></a>BottomNavigationBar</h2><p>会在模拟器下部有一个导航栏</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">class BottomNavigationBarDemo extends StatelessWidget &#123;</span><br><span class="line">  @override</span><br><span class="line">  Widget build(BuildContext context) &#123;</span><br><span class="line">    return BottomNavigationBar(</span><br><span class="line">      items: [</span><br><span class="line">        BottomNavigationBarItem(</span><br><span class="line">          icon: Icon(Icons.explore),</span><br><span class="line">          title: Text(&#39;Explore&#39;)</span><br><span class="line">        ),</span><br><span class="line">        BottomNavigationBarItem(</span><br><span class="line">            icon: Icon(Icons.history),</span><br><span class="line">            title: Text(&#39;History&#39;)</span><br><span class="line">        ),</span><br><span class="line">        BottomNavigationBarItem(</span><br><span class="line">            icon: Icon(Icons.list),</span><br><span class="line">            title: Text(&#39;List&#39;)</span><br><span class="line">        ),</span><br><span class="line">      ],</span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><img src="https://upload-images.jianshu.io/upload_images/16731485-f919a32fedc09e58.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="预览"><br>但是，当导航栏里的item大于3时，会出现一片空白</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line">class BottomNavigationBarDemo extends StatelessWidget &#123;</span><br><span class="line">  @override</span><br><span class="line">  Widget build(BuildContext context) &#123;</span><br><span class="line">    return BottomNavigationBar(</span><br><span class="line">      items: [</span><br><span class="line">        BottomNavigationBarItem(</span><br><span class="line">          icon: Icon(Icons.explore),</span><br><span class="line">          title: Text(&#39;Explore&#39;)</span><br><span class="line">        ),</span><br><span class="line">        BottomNavigationBarItem(</span><br><span class="line">            icon: Icon(Icons.history),</span><br><span class="line">            title: Text(&#39;History&#39;)</span><br><span class="line">        ),</span><br><span class="line">        BottomNavigationBarItem(</span><br><span class="line">            icon: Icon(Icons.list),</span><br><span class="line">            title: Text(&#39;List&#39;)</span><br><span class="line">        ),</span><br><span class="line">        &#x2F;&#x2F; 如果底部导航栏的数量大于3，则会显示空白</span><br><span class="line">        BottomNavigationBarItem(</span><br><span class="line">            icon: Icon(Icons.person),</span><br><span class="line">            title: Text(&#39;My&#39;)</span><br><span class="line">        )</span><br><span class="line">      ],</span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><img src="https://upload-images.jianshu.io/upload_images/16731485-5d8cff242b9b70c2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="预览"><br>要解决这种问题，需要设置导航栏的类型</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">class BottomNavigationBarDemo extends StatelessWidget &#123;</span><br><span class="line">  @override</span><br><span class="line">  Widget build(BuildContext context) &#123;</span><br><span class="line">    return BottomNavigationBar(</span><br><span class="line">      type: BottomNavigationBarType.fixed, &#x2F;&#x2F; 设置导航栏的类型</span><br><span class="line">      items: [</span><br><span class="line">        BottomNavigationBarItem(</span><br><span class="line">          icon: Icon(Icons.explore),</span><br><span class="line">          title: Text(&#39;Explore&#39;)</span><br><span class="line">        ),</span><br><span class="line">        BottomNavigationBarItem(</span><br><span class="line">            icon: Icon(Icons.history),</span><br><span class="line">            title: Text(&#39;History&#39;)</span><br><span class="line">        ),</span><br><span class="line">        BottomNavigationBarItem(</span><br><span class="line">            icon: Icon(Icons.list),</span><br><span class="line">            title: Text(&#39;List&#39;)</span><br><span class="line">        ),</span><br><span class="line">        &#x2F;&#x2F; 如果底部导航栏的数量大于3，则会显示空白</span><br><span class="line">        BottomNavigationBarItem(</span><br><span class="line">            icon: Icon(Icons.person),</span><br><span class="line">            title: Text(&#39;My&#39;)</span><br><span class="line">        )</span><br><span class="line">      ],</span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>这样就可以正常显示了<br><img src="https://upload-images.jianshu.io/upload_images/16731485-caa156f3d27d2464.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="预览"></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">fixedColor: Colors.black, &#x2F;&#x2F; 将导航栏的颜色设置为黑色</span><br></pre></td></tr></table></figure>
<p><img src="https://upload-images.jianshu.io/upload_images/16731485-3229706c0d07351b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="预览"></p>
<h2 id="选择激活"><a href="#选择激活" class="headerlink" title="选择激活"></a>选择激活</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line">class BottomNavigationBarDemo extends StatefulWidget &#123;</span><br><span class="line">  @override</span><br><span class="line">  _BottomNavigationBarDemoState createState() &#x3D;&gt; _BottomNavigationBarDemoState();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">class _BottomNavigationBarDemoState extends State&lt;BottomNavigationBarDemo&gt; &#123;</span><br><span class="line">  int _currentIndex &#x3D; 0;</span><br><span class="line"></span><br><span class="line">  void _onTapHandler(int index)&#123;</span><br><span class="line">  setState(()&#123; &#x2F;&#x2F; setState这个函数只有StatefulWidget才有</span><br><span class="line">    _currentIndex &#x3D; index;</span><br><span class="line">  &#125;);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  @override</span><br><span class="line">  Widget build(BuildContext context) &#123;</span><br><span class="line">    return BottomNavigationBar(</span><br><span class="line">      currentIndex: _currentIndex, &#x2F;&#x2F; 激活状态</span><br><span class="line">      onTap: _onTapHandler, &#x2F;&#x2F; 点击后执行的函数</span><br><span class="line">      type: BottomNavigationBarType.fixed, &#x2F;&#x2F; 设置导航栏的类型</span><br><span class="line">&#x2F;&#x2F;      fixedColor: Colors.black, &#x2F;&#x2F; 将导航栏的颜色设置为黑色</span><br><span class="line">      items: [</span><br><span class="line">        BottomNavigationBarItem(</span><br><span class="line">            icon: Icon(Icons.explore),</span><br><span class="line">            title: Text(&#39;Explore&#39;)</span><br><span class="line">        ),</span><br><span class="line">        BottomNavigationBarItem(</span><br><span class="line">            icon: Icon(Icons.history),</span><br><span class="line">            title: Text(&#39;History&#39;)</span><br><span class="line">        ),</span><br><span class="line">        BottomNavigationBarItem(</span><br><span class="line">            icon: Icon(Icons.list),</span><br><span class="line">            title: Text(&#39;List&#39;)</span><br><span class="line">        ),</span><br><span class="line">        &#x2F;&#x2F; 如果底部导航栏的数量大于3，则会显示空白</span><br><span class="line">        BottomNavigationBarItem(</span><br><span class="line">            icon: Icon(Icons.person),</span><br><span class="line">            title: Text(&#39;My&#39;)</span><br><span class="line">        )</span><br><span class="line">      ],</span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><img src="https://upload-images.jianshu.io/upload_images/16731485-52f3473a6ba8822f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="预览"></p>

      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
    <link itemprop="mainEntityOfPage" href="https://youchen12138.gitee.io/hexo/2020/08/26/Flutter-Drawer/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/hexo/images/avatar.jpg">
      <meta itemprop="name" content="幽辰">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="幽辰的博客">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/hexo/2020/08/26/Flutter-Drawer/" class="post-title-link" itemprop="url">Flutter-Drawer</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">Posted on</span>
              

              <time title="Created: 2020-08-26 16:28:27 / Modified: 16:28:47" itemprop="dateCreated datePublished" datetime="2020-08-26T16:28:27+08:00">2020-08-26</time>
            </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">In</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/hexo/categories/Flutter/" itemprop="url" rel="index"><span itemprop="name">Flutter</span></a>
                </span>
            </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <p><code>drawer</code>是<code>Scaffold</code>一个子属性</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">drawer: Container(</span><br><span class="line">  color: Colors.white,</span><br><span class="line">  padding: EdgeInsets.all(8),</span><br><span class="line">  child: Column(</span><br><span class="line">    mainAxisAlignment: MainAxisAlignment.center,</span><br><span class="line">    children: &lt;Widget&gt;[</span><br><span class="line">      Text(&#39;This is drawer&#39;)</span><br><span class="line">    ],</span><br><span class="line">  ),</span><br><span class="line">),</span><br></pre></td></tr></table></figure>
<p><img src="https://upload-images.jianshu.io/upload_images/16731485-2dcb49738643179b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="drawer"></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line">drawer: Drawer(</span><br><span class="line">  child: ListView(</span><br><span class="line">    padding: EdgeInsets.zero,</span><br><span class="line">    children: &lt;Widget&gt;[</span><br><span class="line">      DrawerHeader(</span><br><span class="line">        child: Text(&#39;header&#39;.toUpperCase()),</span><br><span class="line">        decoration: BoxDecoration(</span><br><span class="line">          color: Colors.grey[100]</span><br><span class="line">        ),</span><br><span class="line">      ),</span><br><span class="line">      ListTile(</span><br><span class="line">        title: Text(&#39;Messages&#39;, textAlign: TextAlign.right,),</span><br><span class="line">        trailing: Icon(Icons.message, color: Colors.black12, size: 22,),</span><br><span class="line">      ),</span><br><span class="line">      ListTile(</span><br><span class="line">        title: Text(&#39;Favorite&#39;, textAlign: TextAlign.right,),</span><br><span class="line">        trailing: Icon(Icons.favorite, color: Colors.black12, size: 22,),</span><br><span class="line">      ),</span><br><span class="line">      ListTile(</span><br><span class="line">        title: Text(&#39;Setting&#39;, textAlign: TextAlign.right,),</span><br><span class="line">        trailing: Icon(Icons.settings, color: Colors.black12, size: 22,),</span><br><span class="line">      ),</span><br><span class="line">    ],</span><br><span class="line">  ),</span><br><span class="line">)</span><br></pre></td></tr></table></figure>
<p><img src="https://upload-images.jianshu.io/upload_images/16731485-d6edfb37f894d987.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="image.png"></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br></pre></td><td class="code"><pre><span class="line">class DrawerDemo extends StatelessWidget &#123;</span><br><span class="line">  @override</span><br><span class="line">  Widget build(BuildContext context) &#123;</span><br><span class="line">    return DefaultTabController(</span><br><span class="line">      length: 3,</span><br><span class="line">      child: Scaffold(</span><br><span class="line">        appBar: AppBar(</span><br><span class="line">          &#x2F;&#x2F; 如果未指定leading，Drawer属性将会自动添加Icons.menu这个图标</span><br><span class="line">          centerTitle: true,</span><br><span class="line">          title: Text(&#39;NINGHAO&#39;),</span><br><span class="line">          actions: &lt;Widget&gt;[</span><br><span class="line">            IconButton(</span><br><span class="line">              icon: Icon(Icons.search),</span><br><span class="line">              tooltip: &#39;Search&#39;,</span><br><span class="line">              onPressed: ()&#x3D;&gt;&#123;</span><br><span class="line">                debugPrint(&#39;Search button is pressed&#39;),</span><br><span class="line">              &#125;,</span><br><span class="line">            ),</span><br><span class="line">            IconButton(</span><br><span class="line">              icon: Icon(Icons.more_horiz),</span><br><span class="line">              tooltip: &#39;Navigration_horizal&#39;,</span><br><span class="line">              onPressed: ()&#x3D;&gt;&#123;</span><br><span class="line">                debugPrint(&#39;more_horiz button is pressed&#39;),</span><br><span class="line">              &#125;,</span><br><span class="line">            ),</span><br><span class="line">          ],</span><br><span class="line">          bottom: TabBar(</span><br><span class="line">            unselectedLabelColor: Colors.black38, &#x2F;&#x2F; 标签栏中未选择的图标颜色</span><br><span class="line">            indicatorColor: Colors.black54, &#x2F;&#x2F; 标签栏中选中的线（指示器）的颜色</span><br><span class="line">            indicatorSize: TabBarIndicatorSize.label, &#x2F;&#x2F; 线的长度</span><br><span class="line">            indicatorWeight: 1.0, &#x2F;&#x2F; 线的宽度</span><br><span class="line">            tabs: &lt;Widget&gt;[</span><br><span class="line">              Tab(icon: Icon(Icons.local_florist),),</span><br><span class="line">              Tab(icon: Icon(Icons.change_history),),</span><br><span class="line">              Tab(icon: Icon(Icons.directions_bike),),</span><br><span class="line">            ],</span><br><span class="line">          ),</span><br><span class="line">        ),</span><br><span class="line">        body: TabBarView(</span><br><span class="line">          children: &lt;Widget&gt;[</span><br><span class="line">            Icon(Icons.local_florist, size: 128, color: Colors.black12,),</span><br><span class="line">            Icon(Icons.change_history, size: 128, color: Colors.black12,),</span><br><span class="line">            Icon(Icons.directions_bike, size: 128, color: Colors.black12,)</span><br><span class="line">          ],</span><br><span class="line">        ),</span><br><span class="line">        drawer: Drawer(</span><br><span class="line">          child: ListView(</span><br><span class="line">            padding: EdgeInsets.zero,</span><br><span class="line">            children: &lt;Widget&gt;[</span><br><span class="line">              DrawerHeader(</span><br><span class="line">                child: Text(&#39;header&#39;.toUpperCase()),</span><br><span class="line">                decoration: BoxDecoration(</span><br><span class="line">                  color: Colors.grey[100]</span><br><span class="line">                ),</span><br><span class="line">              ),</span><br><span class="line">              ListTile(</span><br><span class="line">                title: Text(&#39;Messages&#39;, textAlign: TextAlign.right,),</span><br><span class="line">                trailing: Icon(Icons.message, color: Colors.black12, size: 22,),</span><br><span class="line">              ),</span><br><span class="line">              ListTile(</span><br><span class="line">                title: Text(&#39;Favorite&#39;, textAlign: TextAlign.right,),</span><br><span class="line">                trailing: Icon(Icons.favorite, color: Colors.black12, size: 22,),</span><br><span class="line">              ),</span><br><span class="line">              ListTile(</span><br><span class="line">                title: Text(&#39;Setting&#39;, textAlign: TextAlign.right,),</span><br><span class="line">                trailing: Icon(Icons.settings, color: Colors.black12, size: 22,),</span><br><span class="line">              ),</span><br><span class="line">              ListTile(</span><br><span class="line">                title: Text(&#39;exit&#39;, textAlign: TextAlign.right,),</span><br><span class="line">                trailing: Icon(Icons.exit_to_app, color: Colors.black12, size: 22,),</span><br><span class="line">                &#x2F;&#x2F; 点击该列表项关闭抽屉</span><br><span class="line">                onTap: ()&#x3D;&gt; Navigator.pop(context),</span><br><span class="line">              )</span><br><span class="line">            ],</span><br><span class="line">          ),</span><br><span class="line">        )</span><br><span class="line">      ),</span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><img src="https://upload-images.jianshu.io/upload_images/16731485-1c409af0433c6b72.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="界面样式"><br><img src="https://upload-images.jianshu.io/upload_images/16731485-59393df8ad1ba492.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="抽屉打开"></p>
<h2 id="UserAccountsDrawerHeader"><a href="#UserAccountsDrawerHeader" class="headerlink" title="UserAccountsDrawerHeader"></a>UserAccountsDrawerHeader</h2><p>如果要显示抽屉里的用户账号信息，我们可以将<code>DrawerHeader</code>替换为<code>UserAccountsDrawerHeader</code>，代码如下所示：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">UserAccountsDrawerHeader(</span><br><span class="line">  accountName: Text(&#39;wanghao&#39;, style: TextStyle(fontWeight: FontWeight.bold),),</span><br><span class="line">  accountEmail: Text(&#39;wanghao@ninghao.net&#39;),</span><br><span class="line">  currentAccountPicture: CircleAvatar(</span><br><span class="line">    backgroundImage: AssetImage(&#39;resources&#x2F;images&#x2F;profilePhoto.jpg&#39;),</span><br><span class="line">  ),</span><br><span class="line">),</span><br></pre></td></tr></table></figure>
<p><img src="https://upload-images.jianshu.io/upload_images/16731485-55d65f2c1f6075c5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="设置用户账号信息"></p>
<h2 id="设置UserAccountsDrawerHeader的背景样式"><a href="#设置UserAccountsDrawerHeader的背景样式" class="headerlink" title="设置UserAccountsDrawerHeader的背景样式"></a>设置UserAccountsDrawerHeader的背景样式</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">UserAccountsDrawerHeader(</span><br><span class="line">  accountName: Text(&#39;wanghao&#39;, style: TextStyle(fontWeight: FontWeight.bold),),</span><br><span class="line">  accountEmail: Text(&#39;wanghao@ninghao.net&#39;),</span><br><span class="line">  currentAccountPicture: CircleAvatar(</span><br><span class="line">    backgroundImage: AssetImage(&#39;resources&#x2F;images&#x2F;profilePhoto.jpg&#39;),</span><br><span class="line">  ),</span><br><span class="line">  decoration: BoxDecoration(</span><br><span class="line">    color: Colors.yellow[400], &#x2F;&#x2F; 如果没有背景图像没有填满的话，背景颜色才会显露</span><br><span class="line">    image: DecorationImage(</span><br><span class="line">      image: NetworkImage(&#39;https:&#x2F;&#x2F;resources.ninghao.org&#x2F;images&#x2F;candy-shop.jpg&#39;),</span><br><span class="line">      fit: BoxFit.cover, &#x2F;&#x2F; </span><br><span class="line">      colorFilter: ColorFilter.mode( &#x2F;&#x2F; 混合模式，相当于遮罩层</span><br><span class="line">        Colors.blue[400].withOpacity(0.6), &#x2F;&#x2F; 将遮罩层的透明度设为0.6</span><br><span class="line">        BlendMode.hardLight</span><br><span class="line">      )</span><br><span class="line">    )</span><br><span class="line">  ),</span><br><span class="line">),</span><br></pre></td></tr></table></figure>
<p><img src="https://upload-images.jianshu.io/upload_images/16731485-2f03f95a783a52f3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="设置用户信息的背景样式"></p>

      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
    <link itemprop="mainEntityOfPage" href="https://youchen12138.gitee.io/hexo/2020/08/26/Flutter-MaterialApp%E5%B8%B8%E7%94%A8%E5%B1%9E%E6%80%A7%E4%BB%8B%E7%BB%8D/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/hexo/images/avatar.jpg">
      <meta itemprop="name" content="幽辰">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="幽辰的博客">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/hexo/2020/08/26/Flutter-MaterialApp%E5%B8%B8%E7%94%A8%E5%B1%9E%E6%80%A7%E4%BB%8B%E7%BB%8D/" class="post-title-link" itemprop="url">Flutter-MaterialApp常用属性介绍</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">Posted on</span>
              

              <time title="Created: 2020-08-26 16:27:59 / Modified: 16:28:09" itemprop="dateCreated datePublished" datetime="2020-08-26T16:27:59+08:00">2020-08-26</time>
            </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">In</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/hexo/categories/Flutter/" itemprop="url" rel="index"><span itemprop="name">Flutter</span></a>
                </span>
            </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <h2 id="debugShowCheckedModeBanner"><a href="#debugShowCheckedModeBanner" class="headerlink" title="debugShowCheckedModeBanner"></a>debugShowCheckedModeBanner</h2><p>将此行代码赋为false，页面右上角将会取消debug的条幅</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">debugShowCheckedModeBanner: false, &#x2F;&#x2F; 消除页面右上角的debug条幅</span><br></pre></td></tr></table></figure>
<h2 id="theme"><a href="#theme" class="headerlink" title="theme"></a>theme</h2><p>可以通过此API设置页面的主题颜色</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">MaterialApp(</span><br><span class="line">    debugShowCheckedModeBanner: false, &#x2F;&#x2F; 消除页面右上角的debug条幅</span><br><span class="line">    title: &#39;江约&#39;,</span><br><span class="line">    home: MainApp(),</span><br><span class="line">    theme: ThemeData(</span><br><span class="line">&#x2F;&#x2F;      primarySwatch: Colors.yellow &#x2F;&#x2F; 更换主题颜色</span><br><span class="line">      highlightColor: Color.fromRGBO(255, 0, 0, 0.5), &#x2F;&#x2F; 一次点击水波纹的颜色</span><br><span class="line">      splashColor: Colors.green &#x2F;&#x2F; 二次点击的水波纹颜色</span><br><span class="line">  ),</span><br><span class="line">)</span><br></pre></td></tr></table></figure>
<p><img src="https://upload-images.jianshu.io/upload_images/16731485-b9bcfaf8dfc4424d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="一次点击的水波纹"><br><img src="https://upload-images.jianshu.io/upload_images/16731485-ad7aa601c650b080.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="两次点击的水波纹"></p>

      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
    <link itemprop="mainEntityOfPage" href="https://youchen12138.gitee.io/hexo/2020/08/26/Flutter-TabBar/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/hexo/images/avatar.jpg">
      <meta itemprop="name" content="幽辰">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="幽辰的博客">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/hexo/2020/08/26/Flutter-TabBar/" class="post-title-link" itemprop="url">Flutter-TabBar</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">Posted on</span>
              

              <time title="Created: 2020-08-26 16:27:26 / Modified: 16:27:37" itemprop="dateCreated datePublished" datetime="2020-08-26T16:27:26+08:00">2020-08-26</time>
            </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">In</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/hexo/categories/Flutter/" itemprop="url" rel="index"><span itemprop="name">Flutter</span></a>
                </span>
            </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <p>Tab 标签栏的基本组成是顶部的 Tab标题和内容区域，在 Flutter 中，Material 提供了 TabBar 和 TabBarView 两个 Widget<br><code>TabBar</code>必须是放在<code>AppBar</code>的<code>bottom</code>下</p>
<h2 id="TabBar和Tab"><a href="#TabBar和Tab" class="headerlink" title="TabBar和Tab"></a>TabBar和Tab</h2><p><code>TabBar</code>和<code>Tab</code>都是设置标签栏的内容</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">bottom: TabBar(</span><br><span class="line">  tabs: &lt;Widget&gt;[</span><br><span class="line">    Tab(icon: Icon(Icons.local_florist),),</span><br><span class="line">    Tab(icon: Icon(Icons.change_history),),</span><br><span class="line">    Tab(icon: Icon(Icons.directions_bike),),</span><br><span class="line">  ],</span><br><span class="line">),</span><br></pre></td></tr></table></figure>
<p><img src="https://upload-images.jianshu.io/upload_images/16731485-9f69cf8702805a3d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="TabBar"></p>
<h3 id="TabBar主要属性简介"><a href="#TabBar主要属性简介" class="headerlink" title="TabBar主要属性简介"></a>TabBar主要属性简介</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">bottom: TabBar(</span><br><span class="line">  unselectedLabelColor: Colors.black38, &#x2F;&#x2F; 标签栏中未选择的图标颜色</span><br><span class="line">  indicatorColor: Colors.black54, &#x2F;&#x2F; 标签栏中选中的线（指示器）的颜色</span><br><span class="line">  indicatorSize: TabBarIndicatorSize.label, &#x2F;&#x2F; 线的长度</span><br><span class="line">  indicatorWeight: 1.0, &#x2F;&#x2F; 线的宽度</span><br><span class="line">  tabs: &lt;Widget&gt;[</span><br><span class="line">    Tab(icon: Icon(Icons.local_florist),),</span><br><span class="line">    Tab(icon: Icon(Icons.change_history),),</span><br><span class="line">    Tab(icon: Icon(Icons.directions_bike),),</span><br><span class="line">  ],</span><br><span class="line">),</span><br></pre></td></tr></table></figure>
<p><img src="https://upload-images.jianshu.io/upload_images/16731485-2384f5b65235a51f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="属性改变后"></p>
<h2 id="TabBarView"><a href="#TabBarView" class="headerlink" title="TabBarView"></a>TabBarView</h2><p><code>TabBarView</code>则是设置每一个标签栏选项的页面</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">TabBarView(</span><br><span class="line">  children: &lt;Widget&gt;[</span><br><span class="line">    Icon(Icons.local_florist, size: 128, color: Colors.black12,),</span><br><span class="line">    Icon(Icons.change_history, size: 128, color: Colors.black12,),</span><br><span class="line">    Icon(Icons.directions_bike, size: 128, color: Colors.black12,)</span><br><span class="line">  ],</span><br><span class="line">),</span><br></pre></td></tr></table></figure>
<p><img src="https://upload-images.jianshu.io/upload_images/16731485-1fc590d72f1f4133.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="TabBarView"></p>

      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
    <link itemprop="mainEntityOfPage" href="https://youchen12138.gitee.io/hexo/2020/08/26/Flutter-AppBar/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/hexo/images/avatar.jpg">
      <meta itemprop="name" content="幽辰">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="幽辰的博客">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/hexo/2020/08/26/Flutter-AppBar/" class="post-title-link" itemprop="url">Flutter-AppBar</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">Posted on</span>
              

              <time title="Created: 2020-08-26 16:26:59 / Modified: 16:27:11" itemprop="dateCreated datePublished" datetime="2020-08-26T16:26:59+08:00">2020-08-26</time>
            </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">In</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/hexo/categories/Flutter/" itemprop="url" rel="index"><span itemprop="name">Flutter</span></a>
                </span>
            </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <p>导航栏</p>
<h2 id="centerTitle"><a href="#centerTitle" class="headerlink" title="centerTitle"></a>centerTitle</h2><p>居中AppBar中的title<br><img src="https://upload-images.jianshu.io/upload_images/16731485-d6a4fe66539417a2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="centerTitle"></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">appBar: AppBar(</span><br><span class="line">  centerTitle: true,</span><br><span class="line">)</span><br></pre></td></tr></table></figure>
<h2 id="leading"><a href="#leading" class="headerlink" title="leading"></a>leading</h2><p>会在导航栏最左侧出现一个图标</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">leading: IconButton(</span><br><span class="line">  icon: Icon(Icons.menu),</span><br><span class="line">  tooltip: &#39;Navigration&#39;,</span><br><span class="line">  onPressed: ()&#x3D;&gt;&#123;</span><br><span class="line">  debugPrint(&#39;Navigration button is pressed&#39;),</span><br><span class="line">  &#125;,</span><br><span class="line">),</span><br></pre></td></tr></table></figure>
<p><img src="https://upload-images.jianshu.io/upload_images/16731485-b82d8b66327ec9a1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="leading"></p>
<h2 id="actions"><a href="#actions" class="headerlink" title="actions"></a>actions</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">actions: &lt;Widget&gt;[</span><br><span class="line">  IconButton(</span><br><span class="line">    icon: Icon(Icons.search),</span><br><span class="line">    tooltip: &#39;Navigration&#39;,</span><br><span class="line">    onPressed: ()&#x3D;&gt;&#123;</span><br><span class="line">        debugPrint(&#39;Search button is pressed&#39;),</span><br><span class="line">    &#125;,</span><br><span class="line">  ),</span><br><span class="line">  IconButton(</span><br><span class="line">    icon: Icon(Icons.more_horiz),</span><br><span class="line">    tooltip: &#39;Navigration&#39;,</span><br><span class="line">    onPressed: ()&#x3D;&gt;&#123;</span><br><span class="line">      debugPrint(&#39;more_horiz button is pressed&#39;),</span><br><span class="line">    &#125;,</span><br><span class="line">  ),</span><br><span class="line">],</span><br></pre></td></tr></table></figure>
<p><img src="https://upload-images.jianshu.io/upload_images/16731485-909847163ea4daeb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="actions"></p>

      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
    <link itemprop="mainEntityOfPage" href="https://youchen12138.gitee.io/hexo/2020/08/26/Flutter-ListView/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/hexo/images/avatar.jpg">
      <meta itemprop="name" content="幽辰">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="幽辰的博客">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/hexo/2020/08/26/Flutter-ListView/" class="post-title-link" itemprop="url">Flutter-ListView</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">Posted on</span>
              

              <time title="Created: 2020-08-26 16:26:26 / Modified: 16:26:44" itemprop="dateCreated datePublished" datetime="2020-08-26T16:26:26+08:00">2020-08-26</time>
            </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">In</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/hexo/categories/Flutter/" itemprop="url" rel="index"><span itemprop="name">Flutter</span></a>
                </span>
            </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <p><code>ListView</code>是最常用的可滚动组件之一，它可以沿一个方向线性排布所有子组件，并且它也支持基于Sliver的延迟构建模型。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line">class ListViewDemoPage extends StatelessWidget &#123;</span><br><span class="line">  Widget _listItemBuilder(BuildContext context, int index)&#123;</span><br><span class="line">    return Container(</span><br><span class="line">      color: Colors.white,</span><br><span class="line">      margin: EdgeInsets.all(8),</span><br><span class="line">      child: Column(</span><br><span class="line">        children: &lt;Widget&gt;[</span><br><span class="line">          Image.network(posts[index].imageUrl),</span><br><span class="line">          SizedBox(height: 16,),</span><br><span class="line">          Text(</span><br><span class="line">            posts[index].title,</span><br><span class="line">            style: Theme.of(context).textTheme.title,</span><br><span class="line">          ),</span><br><span class="line">          Text(</span><br><span class="line">            posts[index].author,</span><br><span class="line">            style: Theme.of(context).textTheme.subhead,</span><br><span class="line">          ),</span><br><span class="line">          SizedBox(height: 16,)</span><br><span class="line">        ],</span><br><span class="line">      ),</span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  @override</span><br><span class="line">  Widget build(BuildContext context) &#123;</span><br><span class="line">    return Scaffold(</span><br><span class="line">      backgroundColor: Colors.grey[200],</span><br><span class="line">      appBar: AppBar(</span><br><span class="line">        title: Text(&#39;ListView&#39;),</span><br><span class="line">      ),</span><br><span class="line">      body: ListView.builder(</span><br><span class="line">        itemCount: posts.length, &#x2F;&#x2F; post为一个数据源</span><br><span class="line">        itemBuilder: _listItemBuilder,</span><br><span class="line">      ),</span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="数据源post"><a href="#数据源post" class="headerlink" title="数据源post"></a>数据源post</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br></pre></td><td class="code"><pre><span class="line">class Post &#123;</span><br><span class="line">  Post(&#123;</span><br><span class="line">    this.title,</span><br><span class="line">    this.author,</span><br><span class="line">    this.imageUrl,</span><br><span class="line">    this.description,</span><br><span class="line">  &#125;);</span><br><span class="line"></span><br><span class="line">  final String title;</span><br><span class="line">  final String author;</span><br><span class="line">  final String imageUrl;</span><br><span class="line">  final String description;</span><br><span class="line"></span><br><span class="line">  bool selected &#x3D; false;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">final List&lt;Post&gt; posts &#x3D; [</span><br><span class="line">  Post(</span><br><span class="line">    title: &#39;Candy Shop&#39;,</span><br><span class="line">    author: &#39;Mohamed Chahin&#39;,</span><br><span class="line">    description: &#39;Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.&#39;,</span><br><span class="line">    imageUrl: &#39;https:&#x2F;&#x2F;resources.ninghao.org&#x2F;images&#x2F;candy-shop.jpg&#39;,</span><br><span class="line">  ),</span><br><span class="line">  Post(</span><br><span class="line">    title: &#39;Childhood in a picture&#39;,</span><br><span class="line">    author: &#39;Mohamed Chahin&#39;,</span><br><span class="line">    description: &#39;Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.&#39;,</span><br><span class="line">    imageUrl: &#39;https:&#x2F;&#x2F;resources.ninghao.org&#x2F;images&#x2F;childhood-in-a-picture.jpg&#39;,</span><br><span class="line">  ),</span><br><span class="line">  Post(</span><br><span class="line">    title: &#39;Contained&#39;,</span><br><span class="line">    author: &#39;Mohamed Chahin&#39;,</span><br><span class="line">    description: &#39;Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.&#39;,</span><br><span class="line">    imageUrl: &#39;https:&#x2F;&#x2F;resources.ninghao.org&#x2F;images&#x2F;contained.jpg&#39;,</span><br><span class="line">  ),</span><br><span class="line">  Post(</span><br><span class="line">    title: &#39;Dragon&#39;,</span><br><span class="line">    author: &#39;Mohamed Chahin&#39;,</span><br><span class="line">    description: &#39;Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.&#39;,</span><br><span class="line">    imageUrl: &#39;https:&#x2F;&#x2F;resources.ninghao.org&#x2F;images&#x2F;dragon.jpg&#39;,</span><br><span class="line">  ),</span><br><span class="line">  Post(</span><br><span class="line">    title: &#39;Free Hugs&#39;,</span><br><span class="line">    author: &#39;Mohamed Chahin&#39;,</span><br><span class="line">    description: &#39;Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.&#39;,</span><br><span class="line">    imageUrl: &#39;https:&#x2F;&#x2F;resources.ninghao.org&#x2F;images&#x2F;free_hugs.jpg&#39;,</span><br><span class="line">  ),</span><br><span class="line">  Post(</span><br><span class="line">    title: &#39;Gravity Falls&#39;,</span><br><span class="line">    author: &#39;Mohamed Chahin&#39;,</span><br><span class="line">    description: &#39;Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.&#39;,</span><br><span class="line">    imageUrl: &#39;https:&#x2F;&#x2F;resources.ninghao.org&#x2F;images&#x2F;gravity-falls.png&#39;,</span><br><span class="line">  ),</span><br><span class="line">  Post(</span><br><span class="line">    title: &#39;Icecream Truck&#39;,</span><br><span class="line">    author: &#39;Mohamed Chahin&#39;,</span><br><span class="line">    description: &#39;Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.&#39;,</span><br><span class="line">    imageUrl: &#39;https:&#x2F;&#x2F;resources.ninghao.org&#x2F;images&#x2F;icecreamtruck.png&#39;,</span><br><span class="line">  ),</span><br><span class="line">  Post(</span><br><span class="line">    title: &#39;keyclack&#39;,</span><br><span class="line">    author: &#39;Mohamed Chahin&#39;,</span><br><span class="line">    description: &#39;Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.&#39;,</span><br><span class="line">    imageUrl: &#39;https:&#x2F;&#x2F;resources.ninghao.org&#x2F;images&#x2F;keyclack.jpg&#39;,</span><br><span class="line">  ),</span><br><span class="line">  Post(</span><br><span class="line">    title: &#39;Overkill&#39;,</span><br><span class="line">    author: &#39;Mohamed Chahin&#39;,</span><br><span class="line">    description: &#39;Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.&#39;,</span><br><span class="line">    imageUrl: &#39;https:&#x2F;&#x2F;resources.ninghao.org&#x2F;images&#x2F;overkill.png&#39;,</span><br><span class="line">  ),</span><br><span class="line">  Post(</span><br><span class="line">    title: &#39;Say Hello to Barry&#39;,</span><br><span class="line">    author: &#39;Mohamed Chahin&#39;,</span><br><span class="line">    description: &#39;Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.&#39;,</span><br><span class="line">    imageUrl: &#39;https:&#x2F;&#x2F;resources.ninghao.org&#x2F;images&#x2F;say-hello-to-barry.jpg&#39;,</span><br><span class="line">  ),</span><br><span class="line">  Post(</span><br><span class="line">    title: &#39;Space Skull&#39;,</span><br><span class="line">    author: &#39;Mohamed Chahin&#39;,</span><br><span class="line">    description: &#39;Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.&#39;,</span><br><span class="line">    imageUrl: &#39;https:&#x2F;&#x2F;resources.ninghao.org&#x2F;images&#x2F;space-skull.jpg&#39;,</span><br><span class="line">  ),</span><br><span class="line">  Post(</span><br><span class="line">    title: &#39;The Old Fashioned&#39;,</span><br><span class="line">    author: &#39;Mohamed Chahin&#39;,</span><br><span class="line">    description: &#39;Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.&#39;,</span><br><span class="line">    imageUrl: &#39;https:&#x2F;&#x2F;resources.ninghao.org&#x2F;images&#x2F;the-old-fashioned.png&#39;,</span><br><span class="line">  ),</span><br><span class="line">  Post(</span><br><span class="line">    title: &#39;Tornado&#39;,</span><br><span class="line">    author: &#39;Mohamed Chahin&#39;,</span><br><span class="line">    description: &#39;Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.&#39;,</span><br><span class="line">    imageUrl: &#39;https:&#x2F;&#x2F;resources.ninghao.org&#x2F;images&#x2F;tornado.jpg&#39;,</span><br><span class="line">  ),</span><br><span class="line">  Post(</span><br><span class="line">    title: &#39;Undo&#39;,</span><br><span class="line">    author: &#39;Mohamed Chahin&#39;,</span><br><span class="line">    description: &#39;Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.&#39;,</span><br><span class="line">    imageUrl: &#39;https:&#x2F;&#x2F;resources.ninghao.org&#x2F;images&#x2F;undo.jpg&#39;,</span><br><span class="line">  ),</span><br><span class="line">  Post(</span><br><span class="line">    title: &#39;White Dragon&#39;,</span><br><span class="line">    author: &#39;Mohamed Chahin&#39;,</span><br><span class="line">    description: &#39;Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.&#39;,</span><br><span class="line">    imageUrl: &#39;https:&#x2F;&#x2F;resources.ninghao.org&#x2F;images&#x2F;white-dragon.jpg&#39;,</span><br><span class="line">  )</span><br><span class="line">];</span><br></pre></td></tr></table></figure>
      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
    <link itemprop="mainEntityOfPage" href="https://youchen12138.gitee.io/hexo/2020/08/26/Flutter-%E6%8C%89%E9%92%AE/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/hexo/images/avatar.jpg">
      <meta itemprop="name" content="幽辰">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="幽辰的博客">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/hexo/2020/08/26/Flutter-%E6%8C%89%E9%92%AE/" class="post-title-link" itemprop="url">Flutter-按钮</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">Posted on</span>

              <time title="Created: 2020-08-26 16:25:48" itemprop="dateCreated datePublished" datetime="2020-08-26T16:25:48+08:00">2020-08-26</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="far fa-calendar-check"></i>
                </span>
                <span class="post-meta-item-text">Edited on</span>
                <time title="Modified: 2020-09-02 22:28:09" itemprop="dateModified" datetime="2020-09-02T22:28:09+08:00">2020-09-02</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">In</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/hexo/categories/Flutter/" itemprop="url" rel="index"><span itemprop="name">Flutter</span></a>
                </span>
            </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <p>在 Flutter 里有很多的 Button，包括了：RaisedButton、FloatingActionButton、FlatButton、IconButton、PopupMenuButton、ButtonContainer</p>
<h2 id="RaisedButton"><a href="#RaisedButton" class="headerlink" title="RaisedButton"></a>RaisedButton</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">RaisedButton(</span><br><span class="line">    child: Text(&#39;Button&#39;),</span><br><span class="line">    onPressed: ()&#123;&#125;,</span><br><span class="line">    splashColor: Colors.grey,</span><br><span class="line">    textColor: Theme.of(context).accentColor,</span><br><span class="line">),</span><br></pre></td></tr></table></figure>
<p><img src="https://upload-images.jianshu.io/upload_images/16731485-2e73c1d5f5256681.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="RaiseButton"></p>
<h2 id="FloatingActionButton"><a href="#FloatingActionButton" class="headerlink" title="FloatingActionButton"></a>FloatingActionButton</h2><p>FloatingActionButton 是一个浮动在页面右下角的浮动按钮。<br>当然，我们也可以根据一定的写法来让其位置变化</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line">class FloatingActionButtonDemo extends StatelessWidget &#123;</span><br><span class="line">  @override</span><br><span class="line">  Widget build(BuildContext context) &#123;</span><br><span class="line"></span><br><span class="line">    final Widget _floatingActionButton &#x3D; FloatingActionButton(</span><br><span class="line">      onPressed: ()&#123;&#125;,</span><br><span class="line">      child: Icon(Icons.add),</span><br><span class="line">      elevation: 0.0, &#x2F;&#x2F; 设置阴影</span><br><span class="line">      backgroundColor: Colors.red,</span><br><span class="line">&#x2F;&#x2F;      shape: BeveledRectangleBorder( &#x2F;&#x2F; 设置按钮形状</span><br><span class="line">&#x2F;&#x2F;        borderRadius: BorderRadius.circular(30.0)</span><br><span class="line">&#x2F;&#x2F;      ),</span><br><span class="line">    );</span><br><span class="line">    &#x2F;&#x2F; extended创建的漂浮动作按钮</span><br><span class="line">    final _floatingActionButtonExtended &#x3D; FloatingActionButton.extended(</span><br><span class="line">      onPressed: ()&#123;&#125;,</span><br><span class="line">      icon: Icon(Icons.add),</span><br><span class="line">      label: Text(&#39;Add&#39;),</span><br><span class="line">    );</span><br><span class="line"></span><br><span class="line">    return Scaffold(</span><br><span class="line">      appBar: AppBar(</span><br><span class="line">        title: Text(&#39;FloatingActionButtonDemo&#39;),</span><br><span class="line">        elevation: 0.0,</span><br><span class="line">      ),</span><br><span class="line">      &#x2F;&#x2F; 漂浮动作按钮</span><br><span class="line">      floatingActionButton: _floatingActionButton,</span><br><span class="line">      &#x2F;&#x2F; 漂浮动作按钮默认会在底部工具栏上面，可以通过下面方法调整漂浮动作按钮的位置</span><br><span class="line">      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,</span><br><span class="line">      bottomNavigationBar: BottomAppBar(</span><br><span class="line">        child: Container(height: 50,),</span><br><span class="line">        shape: CircularNotchedRectangle(), &#x2F;&#x2F; 设置漂浮动作按钮与底部工具栏之间的切口</span><br><span class="line">      ),</span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="FlatButton"><a href="#FlatButton" class="headerlink" title="FlatButton"></a>FlatButton</h2><p>文字按钮<br>FlatButton 与 MaterialButton 类似，不同的是它是透明背景的。如果一个 Container 想要点击事件时，可以使用 FlatButton 包裹，而不是 MaterialButton。因为 MaterialButton 默认带背景，而 FlatButton 默认不带背景。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">new FlatButton(</span><br><span class="line">    child: new Text(&#39;点我&#39;),</span><br><span class="line">    onPressed: () &#123;&#125;,</span><br><span class="line">)</span><br></pre></td></tr></table></figure>
<h2 id="IconButton"><a href="#IconButton" class="headerlink" title="IconButton"></a>IconButton</h2><p>IconButton 顾名思义就是 Icon + Button 的复合体，当某个 Icon 需要点击事件时，使用 IconButton 最好不过。<br>这里我们拿RaisedButton来举例（其他按钮也有这样的写法）</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">RaisedButton.icon(</span><br><span class="line">  onPressed: ()&#123;&#125;,</span><br><span class="line">  icon: Icon(Icons.add),</span><br><span class="line">  label: Text(&#39;Button&#39;),</span><br><span class="line">  elevation: 12,</span><br><span class="line">  textColor: Theme.of(context).accentColor,</span><br><span class="line">)</span><br></pre></td></tr></table></figure>
<p><img src="https://upload-images.jianshu.io/upload_images/16731485-125f96dd8bdf8e50.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="RaisedButton.icon"></p>
<h2 id="PopupMenuButton"><a href="#PopupMenuButton" class="headerlink" title="PopupMenuButton"></a>PopupMenuButton</h2><p>下拉菜单按钮</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br></pre></td><td class="code"><pre><span class="line">class PopupMenuButtonDemo extends StatefulWidget &#123;</span><br><span class="line">  @override</span><br><span class="line">  _PopupMenuButtonDemoState createState() &#x3D;&gt; _PopupMenuButtonDemoState();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">class _PopupMenuButtonDemoState extends State&lt;PopupMenuButtonDemo&gt; &#123;</span><br><span class="line">  String _currentMenuItem &#x3D; &#39;Home&#39;;</span><br><span class="line"></span><br><span class="line">  @override</span><br><span class="line">  Widget build(BuildContext context) &#123;</span><br><span class="line">    return Scaffold(</span><br><span class="line">      appBar: AppBar(</span><br><span class="line">        title: Text(&#39;_WidgetDemo&#39;),</span><br><span class="line">        elevation: 0,</span><br><span class="line">      ),</span><br><span class="line">      body: Container(</span><br><span class="line">        padding: EdgeInsets.all(16),</span><br><span class="line">        child: Column(</span><br><span class="line">          mainAxisAlignment: MainAxisAlignment.center,</span><br><span class="line">          children: &lt;Widget&gt;[</span><br><span class="line">            Row(</span><br><span class="line">              mainAxisAlignment: MainAxisAlignment.center,</span><br><span class="line">              children: &lt;Widget&gt;[</span><br><span class="line">                Text(_currentMenuItem),</span><br><span class="line">                PopupMenuButton(</span><br><span class="line">                  onSelected: (value)&#123;</span><br><span class="line">                    setState(() &#123;</span><br><span class="line">                      _currentMenuItem &#x3D; value;</span><br><span class="line">                    &#125;);</span><br><span class="line">                  &#125;,</span><br><span class="line">                  itemBuilder: (BuildContext context)&#x3D;&gt;[</span><br><span class="line">                    PopupMenuItem(</span><br><span class="line">                      value: &#39;Home&#39;,</span><br><span class="line">                      child: Text(&#39;Home&#39;),</span><br><span class="line">                    ),</span><br><span class="line">                    PopupMenuItem(</span><br><span class="line">                      value: &#39;Discover&#39;,</span><br><span class="line">                      child: Text(&#39;Discover&#39;),</span><br><span class="line">                    ),</span><br><span class="line">                    PopupMenuItem(</span><br><span class="line">                      value: &#39;Community&#39;,</span><br><span class="line">                      child: Text(&#39;Community&#39;),</span><br><span class="line">                    ),</span><br><span class="line">                    PopupMenuItem(</span><br><span class="line">                      value: &#39;Me&#39;,</span><br><span class="line">                      child: Text(&#39;Me&#39;),</span><br><span class="line">                    )</span><br><span class="line">                  ],</span><br><span class="line">                )</span><br><span class="line">              ],</span><br><span class="line">            )</span><br><span class="line">          ],</span><br><span class="line">        ),</span><br><span class="line">      ),</span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><img src="https://upload-images.jianshu.io/upload_images/16731485-10ddeaf2327efab2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="PopupMenuButton 未点击"><br><img src="https://upload-images.jianshu.io/upload_images/16731485-f39da00b54f6c5b7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="PopupMenuButton 点击后"></p>
<h2 id="ButtonContainer"><a href="#ButtonContainer" class="headerlink" title="ButtonContainer"></a>ButtonContainer</h2><p>按钮容器</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">Container(</span><br><span class="line">  width: 160, &#x2F;&#x2F; 改变其大小可改变按钮的大小</span><br><span class="line">  child: OutlineButton(</span><br><span class="line">    child: Text(&#39;Button&#39;),</span><br><span class="line">    onPressed: ()&#123;&#125;,</span><br><span class="line">    splashColor: Colors.grey[100],</span><br><span class="line">    borderSide: BorderSide(</span><br><span class="line">      color: Colors.black</span><br><span class="line">    ),</span><br><span class="line">    textColor: Colors.black,</span><br><span class="line">    highlightColor: Colors.grey,</span><br><span class="line">  ),</span><br><span class="line">)</span><br></pre></td></tr></table></figure>
<p><img src="https://upload-images.jianshu.io/upload_images/16731485-1927ce4349ee5426.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="ButtonContainer.png"></p>

      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
    <link itemprop="mainEntityOfPage" href="https://youchen12138.gitee.io/hexo/2020/08/26/Flutter-%E8%B7%AF%E7%94%B1%E7%AE%A1%E7%90%86/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/hexo/images/avatar.jpg">
      <meta itemprop="name" content="幽辰">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="幽辰的博客">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/hexo/2020/08/26/Flutter-%E8%B7%AF%E7%94%B1%E7%AE%A1%E7%90%86/" class="post-title-link" itemprop="url">Flutter-路由管理</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">Posted on</span>
              

              <time title="Created: 2020-08-26 16:25:12 / Modified: 16:25:30" itemprop="dateCreated datePublished" datetime="2020-08-26T16:25:12+08:00">2020-08-26</time>
            </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">In</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/hexo/categories/Flutter/" itemprop="url" rel="index"><span itemprop="name">Flutter</span></a>
                </span>
            </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <p>路由（Route）在移动开发中通常指页面（Page），这跟 web 开发中单页应用的 Route 概念意义是相同的，Route 在 Android 中通常指一个 Activity，在 iOS 中指一个 ViewController。所谓路由管理，就是管理页面之间如何跳转，通常也可被称为导航管理。Flutter 中的路由管理和原生开发类似，无论是 Android 还是 iOS，导航管理都会维护一个路由栈，路由入栈（push）操作对应打开一个新页面，路由出栈（pop）操作对应页面关闭操作，而路由管理主要是指如何来管理路由栈</p>
<h2 id="MaterialPageRoute"><a href="#MaterialPageRoute" class="headerlink" title="MaterialPageRoute"></a>MaterialPageRoute</h2><p><code>MaterialPageRoute</code> 继承自 <code>PageRoute</code> 类是一个抽象类，表示占有整个屏幕空间的一个模态路由页面，它还定义了路由构建及切换时过渡动画的相关接口及属性。</p>
<h3 id="MaterialPageRoute的构造函数"><a href="#MaterialPageRoute的构造函数" class="headerlink" title="MaterialPageRoute的构造函数"></a>MaterialPageRoute的构造函数</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">MaterialPageRoute(&#123;</span><br><span class="line">    WidgetBuilder builder,</span><br><span class="line">    RouteSetting setting,</span><br><span class="line">    bool maintainState &#x3D; true,</span><br><span class="line">    bool fullscreenDialog &#x3D; false,</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<ul>
<li><p><code>builder</code>：是一个 <code>WidgetBuilder</code> 类型的回调函数，它的作用是构建路由页面的具体内容，返回值是一个 widget。</p>
</li>
<li><p><code>settings</code>：包含路由的配置信息，如路由名称、是否初始路由（首页）</p>
</li>
<li><p><code>maintainState</code>：默认情况下，当入栈一个新路由时，原来的路由仍然会被保存在内容中，如果想在路由没用的时候释放其所占用的所有资源，可以设置 <code>maintainState</code> 为 false</p>
</li>
<li><p><code>fullscreenDialog</code> 表示新的路由页面是否是一个全屏的模态对话框，在iOS中，如果 <code>fullscreenDialog</code> 为 true，新页面将会从屏幕底部滑入（而不是水平方向）</p>
</li>
</ul>
<p>如果想自定义路由切换动画，可以自己继承 <code>PageRoute</code> 来实现</p>
<h2 id="Navigator"><a href="#Navigator" class="headerlink" title="Navigator"></a>Navigator</h2><p><code>Navigator</code> 是一个路由管理的组件，它提供了打开和退出路由页方法。<code>Navigator</code> 通过一个栈来管理活动路由集合。通常当前屏幕显示的页面就是栈顶的路由。<code>Navigator</code> 提供了一系列方法来管理路由栈</p>
<h3 id="Future-push-BuildContext-context-Route-route"><a href="#Future-push-BuildContext-context-Route-route" class="headerlink" title="Future push(BuildContext context, Route route)"></a>Future push(BuildContext context, Route route)</h3><p>将给定的路由入栈（即打开新的页面），返回值是一个 <code>Future</code> 对象，用以接收新路由出栈（即关闭）时的返回数据</p>
<h3 id="bool-pop-BuildContext-context-result"><a href="#bool-pop-BuildContext-context-result" class="headerlink" title="bool pop(BuildContext context, [result])"></a>bool pop(BuildContext context, [result])</h3><p>将栈顶路由出栈，<code>result</code> 为页面关闭时返回给上一个页面的数据</p>
<h3 id="实例方法"><a href="#实例方法" class="headerlink" title="实例方法"></a>实例方法</h3><p><code>Navigator</code> 类中第一个参数为 context 的静态方法都对应一个 <code>Navigator</code> 的实例方法</p>
<p>比如 <code>Navigator.push(BuildContext context, Route route)</code>等价于 <code>Navigator.of(context).push(Route route)</code></p>
<h2 id="路由传值"><a href="#路由传值" class="headerlink" title="路由传值"></a>路由传值</h2><p>我们创建一个 <code>TipRoute</code> 路由，它接受一个提示文本参数，负责将传入它的文本显示在页面上，另外 <code>TipRoute</code> 中我们添加一个“返回”按钮，点击后在返回上一个路由的同时会带上一个返回参数</p>
<p>示例</p>

      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
    <link itemprop="mainEntityOfPage" href="https://youchen12138.gitee.io/hexo/2020/08/26/Flutter-%E5%88%9D%E8%AF%86%E7%AF%87/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/hexo/images/avatar.jpg">
      <meta itemprop="name" content="幽辰">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="幽辰的博客">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/hexo/2020/08/26/Flutter-%E5%88%9D%E8%AF%86%E7%AF%87/" class="post-title-link" itemprop="url">Flutter-初识篇</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">Posted on</span>
              

              <time title="Created: 2020-08-26 16:24:30 / Modified: 16:24:57" itemprop="dateCreated datePublished" datetime="2020-08-26T16:24:30+08:00">2020-08-26</time>
            </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">In</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/hexo/categories/Flutter/" itemprop="url" rel="index"><span itemprop="name">Flutter</span></a>
                </span>
            </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <h2 id="认识-Flutter"><a href="#认识-Flutter" class="headerlink" title="认识 Flutter"></a>认识 Flutter</h2><p>Flutter 是谷歌的移动 UI 框架，可以快速在 IOS 和 Android 上构建高质量的原生用户界面。</p>
<p>Flutter 可以与现有的代码一起工作。在全世界，Flutter 正在被越来越多的开发者和组织使用，并且 Flutter 是完全免费、开源的</p>
<h2 id="终端命令"><a href="#终端命令" class="headerlink" title="终端命令"></a>终端命令</h2><blockquote>
<p><code>flutter run</code></p>
</blockquote>
<p>运行，并且显示虚拟机</p>
<blockquote>
<p><code>r</code></p>
</blockquote>
<p>热更新</p>
<blockquote>
<p><code>p</code></p>
</blockquote>
<ul>
<li><p>第一次按下，显示标尺（表格）</p>
</li>
<li><p>再次按下，标尺消失</p>
</li>
</ul>
<blockquote>
<p><code>o</code></p>
</blockquote>
<ul>
<li><p>如果在 Android 模式下，就会查看 iOS 模式下样式</p>
</li>
<li><p>如果在 iOS 模式下，就会查看 Android 模式下样式</p>
</li>
</ul>
<blockquote>
<p><code>q</code></p>
</blockquote>
<p>退出，虚拟机关闭</p>
<blockquote>
<p><code>R</code></p>
</blockquote>
<p>热重启</p>
<h3 id="热更新的另一种方法"><a href="#热更新的另一种方法" class="headerlink" title="热更新的另一种方法"></a>热更新的另一种方法</h3><p>启动 VSCode 的 Debug，等待启动后，每次想要调试的时候 <code>ctrl+s</code></p>
<h1 id="初始-Flutter-语法"><a href="#初始-Flutter-语法" class="headerlink" title="初始 Flutter 语法"></a>初始 Flutter 语法</h1><h2 id="案例"><a href="#案例" class="headerlink" title="案例"></a>案例</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br></pre></td><td class="code"><pre><span class="line">import &#39;package:flutter&#x2F;material.dart&#39;;</span><br><span class="line"></span><br><span class="line">void main() &#x3D;&gt; runApp(new MyApp());</span><br><span class="line"></span><br><span class="line">class MyApp extends StatelessWidget &#123;</span><br><span class="line">@override</span><br><span class="line">Widget build(BuildContext context) &#123;</span><br><span class="line">    return new MaterialApp(</span><br><span class="line">    title: &#39;Flutter Demo&#39;,</span><br><span class="line">    theme: new ThemeData(</span><br><span class="line">        primarySwatch: Colors.blue,</span><br><span class="line">    ),</span><br><span class="line">    home: new MyHomePage(title: &#39;Flutter Demo Home Page&#39;),</span><br><span class="line">    );</span><br><span class="line">&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">class MyHomePage extends StatefulWidget &#123;</span><br><span class="line">MyHomePage(&#123;Key key, this.title&#125;) : super(key: key);</span><br><span class="line">final String title;</span><br><span class="line"></span><br><span class="line">@override</span><br><span class="line">_MyHomePageState createState() &#x3D;&gt; new _MyHomePageState();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">class _MyHomePageState extends State&lt;MyHomePage&gt; &#123;</span><br><span class="line">int _counter &#x3D; 0;</span><br><span class="line"></span><br><span class="line">void _incrementCounter() &#123;</span><br><span class="line">    setState(() &#123;</span><br><span class="line">    _counter++;</span><br><span class="line">    &#125;);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">@override</span><br><span class="line">Widget build(BuildContext context) &#123;</span><br><span class="line">    return new Scaffold(</span><br><span class="line">    appBar: new AppBar(</span><br><span class="line">        title: new Text(widget.title),</span><br><span class="line">    ),</span><br><span class="line">    body: new Center(</span><br><span class="line">        child: new Column(</span><br><span class="line">        mainAxisAlignment: MainAxisAlignment.center,</span><br><span class="line">        children: &lt;Widget&gt;[</span><br><span class="line">            new Text(</span><br><span class="line">            &#39;You have pushed the button this many times:&#39;,</span><br><span class="line">            ),</span><br><span class="line">            new Text(</span><br><span class="line">            &#39;$_counter&#39;,</span><br><span class="line">            style: Theme.of(context).textTheme.display1,</span><br><span class="line">            ),</span><br><span class="line">        ],</span><br><span class="line">        ),</span><br><span class="line">    ),</span><br><span class="line">    floatingActionButton: new FloatingActionButton(</span><br><span class="line">        onPressed: _incrementCounter,</span><br><span class="line">        tooltip: &#39;Increment&#39;,</span><br><span class="line">        child: new Icon(Icons.add),</span><br><span class="line">    ), &#x2F;&#x2F; This trailing comma makes auto-formatting nicer for build methods.</span><br><span class="line">    );</span><br><span class="line">&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="导入包"><a href="#导入包" class="headerlink" title="导入包"></a>导入包</h2><blockquote>
<p><code>import &#39;package:flutter/material.dart&#39;;</code></p>
</blockquote>
<p>此行代码作用是导入了 Material UI 组件库。Material 是一种标准的移动端和 web 端的视觉设计语言，Flutter 默认提供了一套丰富的 Material 风格的 UI 组件</p>
<h2 id="应用入口"><a href="#应用入口" class="headerlink" title="应用入口"></a>应用入口</h2><blockquote>
<p><code>void main() =&gt; runApp(MyApp());</code></p>
</blockquote>
<p>与 C/C++、java 类似，Flutter 应用中 <code>main</code> 函数为应用程序的入口。<code>main</code> 函数中调用了 <code>runApp</code> 方法，它的功能是启动 Flutter 应用。<code>runApp</code> 它接受一个 <code>Widget</code> 参数，在本示例中它是一个 <code>MyApp</code> 对象，<code>MyApp()</code> 是 Flutter 应用的根组件</p>
<h2 id="应用结构"><a href="#应用结构" class="headerlink" title="应用结构"></a>应用结构</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">class MyApp extends StatelessWidget &#123;</span><br><span class="line">    @override</span><br><span class="line">    Widget build(BuildContext context) &#123;</span><br><span class="line">        return new MaterialApp(</span><br><span class="line">            &#x2F;&#x2F;应用名称  </span><br><span class="line">            title: &#39;Flutter Demo&#39;, </span><br><span class="line">            theme: new ThemeData(</span><br><span class="line">                &#x2F;&#x2F;蓝色主题  </span><br><span class="line">                primarySwatch: Colors.blue,</span><br><span class="line">            ),</span><br><span class="line">            &#x2F;&#x2F;应用首页路由  </span><br><span class="line">            home: new MyHomePage(title: &#39;Flutter Demo Home Page&#39;),</span><br><span class="line">        );</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li><p><code>MyApp</code> 类代表 <code>Flutter</code> 应用，它继承了 <code>StatelessWidget</code> 类，这也就意味着应用本身也是一个 widget</p>
</li>
<li><p>Flutter 在构建页面时，会调用组件的 <code>build</code> 方法，widget 的主要工作是提供一个 build() 方法来描述如何构建 UI 界面（通常是通过组合、拼装其它基础 widget）</p>
</li>
<li><p><code>MaterialApp</code> 是 Material 库中提供的 Flutter APP 框架，通过它可以设置应用的名称、主题、语言、首页及路由列表。<code>MaterialApp</code> 也是一个 widget</p>
</li>
<li><p><code>Scaffold</code> 是 Material 库中提供的页面脚手架，它包含导航栏和 Body 以及 <code>FloatingActionButton</code> </p>
</li>
</ul>
<h2 id="StatefulWidget"><a href="#StatefulWidget" class="headerlink" title="StatefulWidget"></a>StatefulWidget</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">class MyHomePage extends StatefulWidget &#123;</span><br><span class="line">    MyHomePage(&#123;Key key, this.title&#125;) : super(key: key);</span><br><span class="line">    final String title;</span><br><span class="line">    @override</span><br><span class="line">    _MyHomePageState createState() &#x3D;&gt; new _MyHomePageState();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">class _MyHomePageState extends State&lt;MyHomePage&gt; &#123;</span><br><span class="line">    ...</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><code>MyHomePage</code> 是 Flutter 应用的首页，它继承自 <code>StatefulWidget</code> 类，表示它是一个有状态的组件（Stateful widget）。</p>
<h3 id="有状态组件-Stateful-widget-和无状态组件-Stateless-widget-的不同"><a href="#有状态组件-Stateful-widget-和无状态组件-Stateless-widget-的不同" class="headerlink" title="有状态组件(Stateful widget)和无状态组件(Stateless widget)的不同"></a>有状态组件(Stateful widget)和无状态组件(Stateless widget)的不同</h3><ol>
<li><p>Stateful widget 可以拥有状态，这些状态在 widget 生命周期中是可以变的，而 Stateless widget 是不可变的</p>
</li>
<li><p>Stateful widget 至少由两个类组成</p>
<ul>
<li><p>一个 <code>StatefulWidget</code> 类</p>
</li>
<li><p>一个 <code>State</code> 类；<code>StatefulWidget</code> 类本身是不变的，但是 <code>State</code> 类中持有的状态在 widget 生命周期中可能会发生变化</p>
</li>
</ul>
</li>
</ol>
<p><code>_MyHomePageState</code> 类是 <code>MyHomePage</code> 类对应的状态类</p>
<h2 id="其他"><a href="#其他" class="headerlink" title="其他"></a>其他</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"> Widget build(BuildContext context) &#123;</span><br><span class="line">    return new Scaffold(</span><br><span class="line">    appBar: new AppBar(</span><br><span class="line">        title: new Text(widget.title),</span><br><span class="line">    ),</span><br><span class="line">    body: new Center(</span><br><span class="line">        child: new Column(</span><br><span class="line">        mainAxisAlignment: MainAxisAlignment.center,</span><br><span class="line">        children: &lt;Widget&gt;[</span><br><span class="line">            new Text(</span><br><span class="line">            &#39;You have pushed the button this many times:&#39;,</span><br><span class="line">            ),</span><br><span class="line">            new Text(</span><br><span class="line">            &#39;$_counter&#39;,</span><br><span class="line">            style: Theme.of(context).textTheme.display1,</span><br><span class="line">            ),</span><br><span class="line">        ],</span><br><span class="line">        ),</span><br><span class="line">    ),</span><br><span class="line">    floatingActionButton: new FloatingActionButton(</span><br><span class="line">        onPressed: _incrementCounter,</span><br><span class="line">        tooltip: &#39;Increment&#39;,</span><br><span class="line">        child: new Icon(Icons.add),</span><br><span class="line">    ),</span><br><span class="line">    );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li><p><code>Scaffold</code> 是 Material 组件库中提供的一个组件，它提供了默认的导航栏、标题和包含主屏幕 widget 树（后同“组件树”或“部件树”）的 <code>body</code> 属性</p>
</li>
<li><p><code>body</code> 的组件树中包含了一个 <code>Center</code> 组件，<code>Center</code> 可以将其子组件树对齐到屏幕中心。此例中，<code>Center</code> 子组件是一个 <code>Column</code> 组件，<code>Column</code> 的作用是将其所有子组件沿屏幕垂直方向依次排列；此例中 <code>Column</code> 子组件是两个 <code>Text</code>，第一个 <code>Text</code> 显示固定文本，第二个 <code>Text</code> 显示 <code>_counter</code> 状态的数值</p>
</li>
</ul>

      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
    <link itemprop="mainEntityOfPage" href="https://youchen12138.gitee.io/hexo/2020/08/26/Dart-%E8%AF%AD%E8%A8%80%E7%AE%80%E4%BB%8B/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/hexo/images/avatar.jpg">
      <meta itemprop="name" content="幽辰">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="幽辰的博客">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/hexo/2020/08/26/Dart-%E8%AF%AD%E8%A8%80%E7%AE%80%E4%BB%8B/" class="post-title-link" itemprop="url">Dart-语言简介</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">Posted on</span>
              

              <time title="Created: 2020-08-26 16:21:21 / Modified: 16:21:40" itemprop="dateCreated datePublished" datetime="2020-08-26T16:21:21+08:00">2020-08-26</time>
            </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">In</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/hexo/categories/Dart/" itemprop="url" rel="index"><span itemprop="name">Dart</span></a>
                </span>
            </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <h2 id="变量声明"><a href="#变量声明" class="headerlink" title="变量声明"></a>变量声明</h2><h3 id="var"><a href="#var" class="headerlink" title="var"></a><code>var</code></h3><p>类似于 JavaScript 中的 <code>var</code>，它可以定义变量</p>
<p>最大的不同是 Dart 中 <code>var</code> 变量一旦赋值，类型便会确定，不能改变其类型</p>
<h3 id="dynamic-和-Object"><a href="#dynamic-和-Object" class="headerlink" title="dynamic 和 Object"></a><code>dynamic</code> 和 <code>Object</code></h3><p><code>Object</code> 是 Dart 所有对象的根基类，也就是说所有类型都是 <code>Object</code> 的子类（包含 Function 和 NULL），所以任何类型的数据都可以赋值给 <code>Object</code> 声明的对象，<code>dynamic</code> 与 <code>var</code> 一样都是关键词，声明的变量可以赋值任意对象。</p>
<h4 id="相同之处"><a href="#相同之处" class="headerlink" title="相同之处"></a>相同之处</h4><p><code>dynamic</code> 与 <code>Object</code> 声明的变量可以在后期改变赋值类型</p>
<h4 id="不同之处"><a href="#不同之处" class="headerlink" title="不同之处"></a>不同之处</h4><p><code>dynamic</code> 声明的对象编译器会提供所有可能的组合，而 <code>Object</code> 声明的对象只能使用 <code>Object</code> 的属性和方法，否则编译器会报错</p>
<h3 id="final-和-const"><a href="#final-和-const" class="headerlink" title="final 和 const"></a><code>final</code> 和 <code>const</code></h3><p>如果你从未打算更改一个变量，那么使用 <code>final</code> 或 <code>const</code>，不是 <code>var</code>，也不是一个类型。一个 <code>final</code> 变量只能被设置一次。被 <code>final</code> 或者 <code>const</code> 修饰的变量，变量类型可以省略</p>
<h4 id="不同之处-1"><a href="#不同之处-1" class="headerlink" title="不同之处"></a>不同之处</h4><p><code>const</code> 变量是一个编译时常量，<code>final</code> 变量在第一次使用时被初始化</p>
<h2 id="函数"><a href="#函数" class="headerlink" title="函数"></a>函数</h2><p>Dart 是一种真正的面向对象的语言，所以即使是函数也是对象，并且有一个类型 Function。这意味着函数可以赋值给变量或作为参数传递给其他函数，这是函数式编程的典型特征</p>
<h3 id="函数声明"><a href="#函数声明" class="headerlink" title="函数声明"></a>函数声明</h3><p>Dart 函数声明如果没有显式声明返回值类型时会默认当做 <code>dynamic</code> 处理，注意，函数返回值没有类型推断</p>
<h3 id="可选的位置参数"><a href="#可选的位置参数" class="headerlink" title="可选的位置参数"></a>可选的位置参数</h3><p>包装一组函数参数，用<code>[]</code>标记为可选的位置参数</p>
<h3 id="可选的命名参数"><a href="#可选的命名参数" class="headerlink" title="可选的命名参数"></a>可选的命名参数</h3><p>定义函数时，使用<code>&#123;param1, param2,...&#125;</code>，用于指定命名参数</p>
<p>调用函数时，可以传参。如果传参，就必须使用指定形参的名称。例如：<code>paramName: value</code></p>
<h2 id="异步支持"><a href="#异步支持" class="headerlink" title="异步支持"></a>异步支持</h2><p>Dart 类库有非常多的返回 <code>Future</code> 或者 <code>Stream</code> 对象的函数。这些函数被称为 <strong>异步函数</strong> ：它们只会在设置好一些耗时操作之后返回，比如像IO操作。而不是等到这个操作完成</p>
<p><code>async</code> 和 <code>await</code> 关键词支持了异步编程，允许我们写出和同步代码很像的异步代码</p>
<h3 id="Future"><a href="#Future" class="headerlink" title="Future"></a><code>Future</code></h3><p><code>Future</code> 与 JavaScript 中的 <code>Promise</code> 非常相似，表示一个异步操作的最终完成（或失败）及其结果值的表示。简单来说，它就是用于处理异步操作的，异步处理成功了就执行成功的操作，异步操作失败了就捕获错误或者停止后续操作。一个 <code>Future</code> 只会对应一个结果，要么成功，要么失败</p>
<p><code>Future</code> 的所有 API 的返回值仍然是一个 <code>Future</code> 对象，所以可以很方便的进行链式调用</p>
<h4 id="Future-then"><a href="#Future-then" class="headerlink" title="Future.then"></a><code>Future.then</code></h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">Future.delayed(new Duration(seconds: 2), ()&#123;</span><br><span class="line">    return &quot;hi.world&quot;;</span><br><span class="line">&#125;).then((data)&#123;</span><br><span class="line">    print(data);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h4 id="Future-catchError"><a href="#Future-catchError" class="headerlink" title="Future.catchError"></a><code>Future.catchError</code></h4><p>如果异步任务发生错误，我们可以在 <code>catchError</code> 中捕获错误</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">Future.delayed(new Duration(seconds: 2), ()&#123;</span><br><span class="line">    return &quot;hi.world&quot;;</span><br><span class="line">&#125;).then((data)&#123;</span><br><span class="line">    print(data);</span><br><span class="line">&#125;).catchError((e)&#123;</span><br><span class="line">    &#x2F;&#x2F; 执行失败会走到这里</span><br><span class="line">    print(e);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>不是只有 <code>catchError</code> 回调才能捕获错误，<code>then</code> 方法还有一个可选参数 <code>onError</code>，我们也可以用它来捕获异常</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">Future.delayed(new Duration(seconds: 2), ()&#123;</span><br><span class="line">    return &quot;hi.world&quot;;</span><br><span class="line">&#125;).then((data)&#123;</span><br><span class="line">    print(data);</span><br><span class="line">&#125;, onError: (e)&#123;</span><br><span class="line">    print(e);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h4 id="Future-whenComplete"><a href="#Future-whenComplete" class="headerlink" title="Future.whenComplete"></a><code>Future.whenComplete</code></h4><p>有些时候，我们会遇到无论异步任务执行成功或失败都需要做一些事的场景，比如在网络请求前弹出加载对话框，在请求结束后关闭对话框。</p>
<p>这种场景，有两种方法，第一种是分别在 <code>then</code> 或 <code>catch</code> 中关闭一下对话框，第二种就是使用 <code>Future</code> 的 <code>whenComplete</code> 回调</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">Future.delayed(new Duration(seconds: 2), ()&#123;</span><br><span class="line">    return &quot;hi.world&quot;;</span><br><span class="line">&#125;).then((data)&#123;</span><br><span class="line">    &#x2F;&#x2F; 执行成功会走到这里</span><br><span class="line">    print(data);</span><br><span class="line">&#125;, onError: (e)&#123;</span><br><span class="line">    &#x2F;&#x2F; 执行失败会走到这里</span><br><span class="line">    print(e);</span><br><span class="line">&#125;).whenComplete(()&#123;</span><br><span class="line">    &#x2F;&#x2F; 无论成功或失败都会走到这里</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h4 id="Future-wait"><a href="#Future-wait" class="headerlink" title="Future.wait"></a><code>Future.wait</code></h4><p>它接收一个 <code>Future</code> 数组参数，只有数组中所有 <code>Future</code> 都执行成功后，才会触发 <code>then</code> 的成功回调，只要有一个 <code>Future</code> 执行失败，就会触发错误回调。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">Future.wait([</span><br><span class="line">    &#x2F;&#x2F; 2秒后返回结果</span><br><span class="line">    Future.delayed(new Duration(seconds: 2), ()&#123;</span><br><span class="line">        return &#39;hello&#39;;</span><br><span class="line">    &#125;),</span><br><span class="line">    &#x2F;&#x2F; 4秒后返回结果</span><br><span class="line">    Future.delayed(new Duration(seconds:4), ()&#123;</span><br><span class="line">        return &#39; world&#39;;</span><br><span class="line">    &#125;)</span><br><span class="line">]).then((results)&#123;</span><br><span class="line">    print(result[0]+result[1]);</span><br><span class="line">&#125;).catchError((e)&#123;</span><br><span class="line">    print(e);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h3 id="Async-await"><a href="#Async-await" class="headerlink" title="Async/await"></a><code>Async/await</code></h3><h4 id="回调地狱（Callback-Hell）"><a href="#回调地狱（Callback-Hell）" class="headerlink" title="回调地狱（Callback Hell）"></a>回调地狱（Callback Hell）</h4><p>如果代码中有大量的异步逻辑，并且出现大量异步任务依赖其它异步任务的结果时，必然会出现 <code>Future.then</code> 回调中套回调情况</p>
<p>可以感受一下，如果业务逻辑中由大量异步依赖的情况，将会出现在回调里面套回调的情况，过多的嵌套会导致代码可读性下降以及出错率提高，并且非常难维护，这个问题被形象的称为回调地狱（Callback Hell）</p>
<h4 id="使用-async-await-消除-callback-hell"><a href="#使用-async-await-消除-callback-hell" class="headerlink" title="使用 async/await 消除 callback hell"></a>使用 <code>async/await</code> 消除 callback hell</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">Future&lt;String&gt; login(String userName, String pwd)&#123;</span><br><span class="line">    &#x2F;&#x2F; 用户登录</span><br><span class="line">&#125;</span><br><span class="line">Future&lt;String&gt; getUserInfo(String id)&#123;</span><br><span class="line">    &#x2F;&#x2F; 获取用户信息</span><br><span class="line">&#125;</span><br><span class="line">Future saveUserInfo(String userInfo)&#123;</span><br><span class="line">    &#x2F;&#x2F; 保存用户信息</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">task() async&#123;</span><br><span class="line">    try&#123;</span><br><span class="line">        String id &#x3D; await login(&#39;alice&#39;, &#39;*****&#39;);</span><br><span class="line">        String userInfo &#x3D; await getUserInfo(id);</span><br><span class="line">        await saveUserInfo(userInfo);</span><br><span class="line">    &#125;catch(e)&#123;</span><br><span class="line">        &#x2F;&#x2F; 错误处理</span><br><span class="line">        print(e);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li><p><code>async</code> 用来表示函数是异步的，定义的函数会返回一个 <code>Future</code> 对象，可以使用 then 方法添加回调函数</p>
</li>
<li><p><code>await</code> 后面是一个 <code>Future</code>，表示等待该异步任务完成，异步完成后才会往下走；<code>await</code> 必须出现在 <code>async</code> 函数内部</p>
</li>
<li><p>其实，无论是在 JavaScript 还是 Dart 中，<code>async/await</code> 都只是一个语法糖，编译器或解释器最终都会将其转化为一个 Promise(Future) 的调用链</p>
</li>
</ul>
<h3 id="Stream"><a href="#Stream" class="headerlink" title="Stream"></a><code>Stream</code></h3><p><code>Stream</code> 也是用于接收异步事件数据，和 <code>Future</code> 不同的是，它可以接收多个异步操作的结果（成功或失败）。也就是说，在执行异步任务时，可以通过多次触发成功或失败事件来传递结果数据或错误异常。<code>Stream</code> 常用于会多次读取数据的异步任务场景，如网络内容下载、文件读写等</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">Stream.fromFutures([</span><br><span class="line">    &#x2F;&#x2F; 1秒后返回结果</span><br><span class="line">    Future.delayed(new Duration(seconds: 1), ()&#123;</span><br><span class="line">        return &#39;hello 1&#39;;</span><br><span class="line">    &#125;),</span><br><span class="line">    &#x2F;&#x2F; 抛出一个异常</span><br><span class="line">    Future.delayed(new Duration(seconds: 2), ()&#123;</span><br><span class="line">        throw AssertionError(&#39;Error&#39;);</span><br><span class="line">    &#125;),</span><br><span class="line">    &#x2F;&#x2F; 3秒后返回结果</span><br><span class="line">    Future.delayed(new Duration(seconds: 3), ()&#123;</span><br><span class="line">        return &#39;hello 3&#39;;</span><br><span class="line">    &#125;)</span><br><span class="line">]).listen((data)&#123;</span><br><span class="line">    print(data);</span><br><span class="line">&#125;, onError: (e)&#123;</span><br><span class="line">    print(e.message);</span><br><span class="line">&#125;, onDone: ()&#123;</span><br><span class="line"></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<p>上面的代码依次会输出</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">I&#x2F;flutter (17666): hello 1</span><br><span class="line">I&#x2F;flutter (17666): Error</span><br><span class="line">I&#x2F;flutter (17666): hello 3</span><br></pre></td></tr></table></figure>
      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  


  
  <nav class="pagination">
    <a class="extend prev" rel="prev" href="/hexo/page/7/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/hexo/">1</a><span class="space">&hellip;</span><a class="page-number" href="/hexo/page/7/">7</a><span class="page-number current">8</span><a class="page-number" href="/hexo/page/9/">9</a><span class="space">&hellip;</span><a class="page-number" href="/hexo/page/13/">13</a><a class="extend next" rel="next" href="/hexo/page/9/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
  </nav>



          </div>
          

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          Table of Contents
        </li>
        <li class="sidebar-nav-overview">
          Overview
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="幽辰"
      src="/hexo/images/avatar.jpg">
  <p class="site-author-name" itemprop="name">幽辰</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/hexo/archives/">
        
          <span class="site-state-item-count">127</span>
          <span class="site-state-item-name">posts</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/hexo/categories/">
          
        <span class="site-state-item-count">14</span>
        <span class="site-state-item-name">categories</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/hexo/tags/">
          
        <span class="site-state-item-count">23</span>
        <span class="site-state-item-name">tags</span></a>
      </div>
  </nav>
</div>



      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2021</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">幽辰</span>
</div>
  <div class="powered-by">Powered by <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.org/" class="theme-link" rel="noopener" target="_blank">NexT.Gemini</a>
  </div>

        








      </div>
    </footer>
  </div>

  
  <script src="/hexo/lib/anime.min.js"></script>
  <script src="/hexo/lib/velocity/velocity.min.js"></script>
  <script src="/hexo/lib/velocity/velocity.ui.min.js"></script>

<script src="/hexo/js/utils.js"></script>

<script src="/hexo/js/motion.js"></script>


<script src="/hexo/js/schemes/pisces.js"></script>


<script src="/hexo/js/next-boot.js"></script>




  















  

  

</body>
</html>
